/* eslint-disable react-hooks/exhaustive-deps */
import { NavBar, Cascader, Toast } from 'antd-mobile' // 组件引入
import './index.css' // 页面样式
import { getWeather } from '../../../../api/index' // 获取天气情况
import { EnvironmentOutline, DownOutline } from 'antd-mobile-icons' // 页面icon
import { useState, useEffect } from 'react'
import { cityOptions } from './data' // 地区数据
import * as echarts from 'echarts' // 引入echarts图表
import { useNavigate } from 'react-router-dom' // 路由


interface INight {
  type: string, // 天气温度
  fengxiang: string, // 风向
  fengli: string, // 风级
}

interface IWeatherList extends INight {
  date: string, // 日期
  week: string, // 星期几
  type: string, // 天气类型
  low: string, // 最低温度
  high: string, // 最高温度
  fengxiang: string, // 风向
  fengli: string, // 风级
  night: INight, // 夜晚天气
}

interface IAir {
  aqi: number, // 空气质量指数
  aqi_level: number, // 空气质量指数级别
  aqi_name: string, // 空气质量指数级别的名称
  co: string, // 一氧化碳浓度
  no2: string, // 二氧化氮浓度
  o3: string, // 臭氧浓度
  pm10: string, // 可吸入颗粒物
  'pm2.5': string, // 可吸入颗粒物
  so2: string, // 二氧化硫浓度
}

/**
 * MyWeather 组件
 *
 * @returns 返回包含天气信息的 JSX 元素
 */
function MyWeather() {

   /* 路由 */
   const navigate = useNavigate();

  /* 声明变量 */
  const [cityName, setCityName] = useState<string>("北京") // 地区名称
  const [cityVisible, setCityVisible] = useState<boolean>(false) // 地区选择组件是否显示
  const [weatherList, setWeatherList] = useState<IWeatherList[]>([]) // 一周天气信息列表
  const [airInfo, setAirInfo] = useState<IAir | null>(null) // 本天空气质量信息
  const [tips, setTips] = useState<string>('') // 天气提示

  /* 事件函数 */
  // 获取天气信息
  const getWeatherInfo = async () => {
    try {
      const res = await getWeather({ city: cityName, type: 'week' })
      setWeatherList(res.data.data)
      setTips(res.data.tip)
      setAirInfo(res.data.air)
      const highList: string[] = res.data.data.map((item: IWeatherList) => parseInt(item.high));
      const lowList: string[] = res.data.data.map((item: IWeatherList) => parseInt(item.low));
      getWeatherChart('weatherChartHigh', highList)
      getWeatherChart('weatherChartLow', lowList)
    } catch (error) {
      console.log(error);
    }
  }
  // 选择地区城市
  const onSelectCityName = (value: string[]) => {
    // 判断是否选择了一个城市
    if (value.length === 1) return Toast.show({
      content: '请选择二级城市',
    })
    else setCityName(value[1])
    setCityVisible(false)
  }
  // 天气折线图
  const getWeatherChart = (Id: string, List: string[]) => {
    const myChart = echarts.init(document.getElementById(Id))
    myChart.setOption({
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '-8%',
        right: '0%',
        top: '300px',
        containLabel: true
      },
      toolbox: {
        feature: {
        }
      },
      xAxis: {
        type: 'category',
        show: false,
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value} °C'
        },
        show: false
      },
      series: [

        {
          type: 'line',
          stack: 'Total',
          data: [...List],
          label: {
            show: true,  // 显示标签
            position: Id === 'weatherChartHigh' ? 'top' : 'bottom',  // 可以根据需要调整标签位置
            color: '#fff',
            fontSize: 12,
          },
        }
      ]
    });
  }
  // 根据类型判断背景图片
  const getBackgroundPosition = (type: string) => {
    switch (type) {
      case '晴': return { backgroundPosition: `-0px 0` }
      case '多云': return { backgroundPosition: `-26px 0` }
      case '小雨': return { backgroundPosition: `-203px 0` }
      case '中雨': return { backgroundPosition: `-233px 0` }
      case '阴': return { backgroundPosition: `-56px 0` }
      case '阵雨': return { backgroundPosition: `-85px 0` }
      case '大雨': return { backgroundPosition: `-260px 0` }
      default: return {}
    }
  }

  /* 函数调用 */
  useEffect(() => {
    getWeatherInfo()
  }, [cityName]);

  return (
    <div className="app-container">
      <NavBar onBack={() => navigate(-1)}></NavBar>
      <div className='top' onClick={() => {
        setCityVisible(true)
      }}>
        <EnvironmentOutline />
        <span>{cityName}</span>
        <DownOutline />
      </div>
      {/* 选择地区组件 */}
      <Cascader
        options={cityOptions}
        visible={cityVisible}
        onConfirm={(value) => {
          onSelectCityName(value as string[])
        }}
        onCancel={() => {
          setCityVisible(false)
        }}
      />
      {/* 天气提示语 */}
      <div className='tips'>
        <p>{tips}</p>
      </div>
      {/* 本日天气 */}
      <div className='nowWeather'>
        <p>{weatherList[0]?.high}</p>
        <div className='nowSetting'>
          <ul>
            <li>
              {weatherList[0]?.type}
            </li>
            <li>
              {weatherList[0]?.fengxiang}
            </li>
            <li>
              <span>{airInfo?.aqi_name}</span>
            </li>
          </ul>
        </div>
      </div>
      {/* 一周天气 */}
      <div className='weekWeather'>
        <ul>
          {weatherList.map((item, index) => {
            const backgroundPositionHigh = getBackgroundPosition(item.type); // 调用函数获取背景位置
            const backgroundPositionLow = getBackgroundPosition(item.night.type); // 调用函数获取背景位置
            return (
              <li style={{ border: index == 6 ? 0 : "", color: index == 0 ? 'red' : "#fff" }} key={index}>
                <h6>{item.week}</h6>
                <p>{item.type}</p>
                <p>{item.fengxiang}</p>
                <p>{item.fengli}</p>
                <i style={backgroundPositionHigh}></i>
                <div className='weekWeatherLow'>
                  <i style={backgroundPositionLow}></i>
                  <p>{item.night.type}</p>
                  <p>{item.night.fengxiang}</p>
                  <p>{item.night.fengli}</p>
                </div>
              </li>
            )
          })}
        </ul>
        <div id='weatherChartHigh' className='weatherChart'></div>
        <div id='weatherChartLow' className='weatherChart1'></div>
      </div>
    </div>
  )
}

export default MyWeather